<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>道闸信息</title>
	<link rel="stylesheet" type="text/css" href="/css/login.css">
	<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="/js/vue.js"></script>
	<script type="text/javascript" src="/js/config.js"></script>
	<script type="text/javascript" src="/js/jquery.serializejson.js"></script>
	<script type="text/javascript" src="/js/layer/layer.js"></script>
	<script type="text/javascript" src="/js/paging.js"></script>
</head>
<body style="background:#fff;">
<form id="searchForm" style="display: none;">
	<div class="search-bar clearfix panel" style="height: auto;padding-bottom: 0px;">
		<div class="box">
			<div class="cell-search" >
				<label>选择市场</label>
				<select name="marketId">
					<option value="">全部市场</option>
					<option v-for="marketItem in marketList" :value="marketItem.marketId">{{marketItem.marketName}}</option>
				</select>
			</div>
			<div class="search-btn-box">
				<button type="button" id="serchGate">查询</button>
			</div>
		</div>
	</div>
</form>
<script type="text/javascript" src="../js/search.js"></script>
<div class="" id="app">
	<table style="width: 100%">
		<tr>
			<td style="text-align: left"><a onclick="newGate()"  class="add-button  opr-url">新增道闸信息</a></td>
		</tr>
	</table>

	<table class="list-box gate-table">
		<thead>
		<tr>
			<th>道闸编号</th>
			<th>道闸名称</th>
			<th>所属市场</th>
		</tr>
		</thead>
		<tbody>
		<tr v-for="re in res">
			<td>
				<p>{{re.gateCode}}</p>
			</td>
			<td>
				<p>{{re.gateName}}</p>
			</td>
			<td>
				<p>{{re.market.marketName}}</p>
			</td>
		</tr>
		</tbody>
	</table>
	<!-- 新增道闸信息  -->
	<form class="cell-content" id="insertGateForm" style="display: none;" >
		<div class="cell">
			<label><span class="red">*</span>道闸名称</label>
			<input type="text" name="gateName" id="gateName">
		</div>
		<div class="cell">
			<label><span class="red">*</span>道闸编号</label>
			<input type="text" name="gateCode" id="gateCode">
		</div>
		<input type="hidden" name="marketId" v-bind:value="marketId">
		<div class="cell" id="selectMarketId" style="display:none;">
			<label><span class="red">*</span>所属市场</label>
			<select name="marketId">
				<option v-for="marketItem in marketList" :value="marketItem.marketId">{{marketItem.marketName}}</option>
			</select>
		</div>
	</form>
</div>
<div id="page" class="page_div"></div>

</body>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data: {
            res:[],
            gateName : "a",
            gateCode : "a",
            marketId : marketId,
            marketList:[]
        },
        methods: {

        },
    });

    var pageIndexNow = 1;
    if (marketId == 1){
        marketId = null;
    }
    $.ajax({
        type: "get",      //data 传送数据类型。post 传递
        dataType: 'json',  // 返回数据的数据类型json
        url: defaultUrl+"/controller/gate/getGateNum",  // yii 控制器/方法
        cache: false,
        data: {'marketId': marketId},  //传送的数据
        error:function(){
            alert("数据传输错误");
        },success: function (data) {

            console.log(data);
            if (data.code != 1) {
                return false
            }
            var pageTotal = data.result.total;
            var pageNumTotal = Math.ceil(pageTotal/20);
            $("#page").paging({
                pageNo:pageIndexNow,
                totalPage: pageNumTotal,
                totalSize: pageTotal,
                callback: function(num) {
                    pageIndexNow = num;
                    initList(num);
                }
            });
        }
    });
    function initList(pageIndex){

        if (marketId == null){
            $("#searchForm").show();
        }

        $.ajax({
            type: "get",      //data 传送数据类型。post 传递
            dataType: 'json',  // 返回数据的数据类型json
            url: defaultUrl+"/controller/gate/getGateList",  // yii 控制器/方法
            cache: false,
            data: {'pageIndex': pageIndex,'pageSize':'20','marketId': marketId},  //传送的数据
            error:function(){
                alert("数据传输错误");
            },success: function (data) {
                console.log(data);
                if (data.code != 1) {
                    return false
                }
                vm.res = data.result;
            }
        });
    }
    initList(1);

    function newGate(){

        if (marketId == null){
            $.get(defaultUrl+"/controller/getMarketList?marketId="+1,function(res){
                vm.marketList = res.result;
            },'json');
            $("#selectMarketId").show();
        }

        layer.open({
            type: 1,
            title:'新增道闸信息',
            area: ['600px', '500px'],
            fixed: false, //不固定
            maxmin: true,
            content: $('#insertGateForm'),
            btn:['确定','取消'],
            yes:function(){
                $.ajax({
                    type: "get",      //data 传送数据类型。post 传递
                    dataType: 'json',  // 返回数据的数据类型json
                    url: defaultUrl + "/controller/gate/insertGate",  // yii 控制器/方法
                    cache: false,
                    data: $('#insertGateForm').serializeJSON(),
                    error:function(){
                        // alert("数据传输错误");
                    },success: function (data) {
                        layer.closeAll();
                        layer.msg(data.msg);
                        initList(1);
                    }
                });
            },
        });

    }
</script>
</html>


































